<!--
 * @version: 
 * @Author: yu
 * @Date: 2023-07-10 15:56:59
 * @LastEditors: Andy
 * @LastEditTime: 2023-07-11 21:36:04
-->
<template>
    <el-table :data="store.getters['menu/getMenu']" style="width: 100%; margin-bottom: 20px" row-key="id" border
        default-expand-all :tree-props="{ children: 'children' }">
        <el-table-column prop="id" label="菜单编号" sortable width="180"></el-table-column>
        <el-table-column prop="title" label="菜单名称" width="180"></el-table-column>
        <el-table-column prop="icon" label="菜单图标"></el-table-column>
        <el-table-column prop="url" label="菜单地址"></el-table-column>

        <el-table-column prop="status" label="状态">
            <template v-slot="item">
                <el-button v-if="item.row.status === 1" type="primary" size="small">启用</el-button>
                <el-button v-else type="danger" size="small">禁用</el-button>
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template v-slot="scope">
                <el-button @click="edit(scope.row.id)" type="primary" size="small">编辑</el-button>
                <el-button @click="del(scope.row.id)" type="danger" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script  setup>
import { onMounted, computed, defineProps, defineEmits } from "vue";
import { useStore, mapGetters } from "vuex";
import { ElMessage, ElMessageBox } from 'element-plus'
import { menuDel } from '@/request/api'
const store = useStore();
//组件一加载触发行动
// console.log(store);
store.dispatch('menu/listActions')


// 获取菜单列表的数据
// const [tableData] = Object.values(mapGetters('menu', ['list'])).map(fn => computed(fn.bind({ $store: store })));



//子传父
let emits = defineEmits(['edit'])

//封装一个编辑事件
const edit = (id) => {
    emits('edit', id)
}

//删除
function del(id) {
    ElMessageBox.confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        menuDel({ id }).then(res => {
            // console.log(res);
            if (res.code === 200) {
                //消息提示
                ElMessage.success(res.msg)
                //更新列表
                store.dispatch('menu/listActions')
            } else {
                ElMessage.error(res.msg)
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        });
    })
}

onMounted(() => {
    // console.log(store);
    // store.dispatch('menu/listActions')
})
</script>

<style></style>